<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>品类缺失</title>
        <link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
        <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
        <script type="text/javascript" src="/webapp/js/common/config.js"></script>

        <script type="text/javascript" src="/webapp/js/lib/Jquery.easyui.tooltip.js"></script>
    </head>
    <body>
        <div class="easyui-container-fluid">
            <div class="easyui-panel" style="border:none;">
                <div class="nav" id="nav"></div>
                <div class="easyui-panel" style="border:none;">
                    <form id="ff">
                        <div style="margin-bottom:20px;">
                            <span>
                            <label class="item-label">年份：</label>
                            <input type="text" class="easyui-combobox" name="year" id="year" style="width:100px;"/>
                            </span>
                            <span id="monthLabel">
                            <label class="item-label">月份：</label>
                            <input type="text" class="easyui-combobox" name="month" id="month" style="width:100px;"/></span>
                            <span id="weekLabel">
                            <label class="item-label">周数：</label>
                            <input type="text" class="easyui-combobox" name="week" id="week" style="width:100px;"/></span>
                            <label class="item-label">品类：</label>
                            <select id="categorySelect" class="easyui-combobox" style="width:174px;" name="categories" data-options="multiple:true"></select>
                            <label class="item-label">渠道码：</label>
                            <input id="channelCodeMulti" name="channelCodeMulti" style="width:200px" data-options="
                                                        prompt: '多个渠道码请用逗号隔开'

                                                        " class="easyui-textbox">
                            <label class="item-label">记录数：</label>
                            <input id="recordCountQuery" class="easyui-switchbutton" checked style="width:60px;height:30px;" onText="ON" offText="OFF"  >
                            &nbsp;量：
                            <input id="countQuery" class="easyui-switchbutton" style="width:60px;height:30px;" onText="ON" offText="OFF"   >
                            &nbsp;额：
                            <input id="totalQuery" class="easyui-switchbutton" style="width:60px;height:30px;" onText="ON" offText="OFF"   >
                            &nbsp;品类缺失：
                            <input id="categorQuery" class="easyui-switchbutton" style="width:60px;height:30px;" onText="ON" offText="OFF"   >
                            <a href="javascript:void(0);" style="margin-left:40px;width:80px;" class="easyui-linkbutton c8" onclick="searchBy()">查询</a>
                        </div>
                    </form>
                </div>
                <div class="table-wrapper " >
                    <table id="datagrid">
                        <thead>
                            <tr>
                                <th data-options="field:'channelCode',align:'center'" width="80">渠道码</th>
                                <th data-options="field:'recordCount',align:'center',formatter:zeroReplace" width="100"><span style='color: red'>本月/周(条)</span></th>
                                <th data-options="field:'recordCount1',align:'center',formatter:zeroReplace" width="100"><span style='color: red'>-1月/周</span></th>
                                <th data-options="field:'recordCount2',align:'center',formatter:zeroReplace" width="100"><span style='color: red'>-2月/周</span></th>
                                <th data-options="field:'recordCount3',align:'center',formatter:zeroReplace" width="100"><span style='color: red'>-3月/周</span></th>
                                <th data-options="field:'recordCount4',align:'center',formatter:zeroReplace" width="100"><span style='color: red'>-4月/周</span></th>
                                <th data-options="field:'count',align:'center',formatter:zeroReplace" width="100"><span style='color: green'>本月/周(量)</span></th>
                                <th data-options="field:'count1',align:'center',formatter:zeroReplace" width="100"><span style='color: green'>-1月/周</span></th>
                                <th data-options="field:'count2',align:'center',formatter:zeroReplace" width="100"><span style='color: green'>-2月/周</span></th>
                                <th data-options="field:'count3',align:'center',formatter:zeroReplace" width="100"><span style='color: green'>-3月/周</span></th>
                                <th data-options="field:'count4',align:'center',formatter:zeroReplace" width="100"><span style='color: green'>-4月/周</span></th>
                                <th data-options="field:'total',align:'center',formatter:zeroReplace" width="100">本月/周(额)</th>
                                <th data-options="field:'total1',align:'center',formatter:zeroReplace" width="100">-1月/周</th>
                                <th data-options="field:'total2',align:'center',formatter:zeroReplace" width="100">-2月/周</th>
                                <th data-options="field:'total3',align:'center',formatter:zeroReplace" width="100">-3月/周</th>
                                <th data-options="field:'total4',align:'center',formatter:zeroReplace" width="100">-4月/周</th>
                                <th data-options="field:'categoryName',align:'center'" width="100">品类缺失</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function () {
            setNav();
            // initCategoryMultiple();
            initCategorySelect("categorySelect")
            initMonthWeek("monthLabel", "weekLabel");
            $('#channelCodeMulti').textbox({
                icons: [{
                    iconCls: 'icon-clear', handler: function (e) {
                        $(e.data.target).textbox('clear');
                    }
                }]
            });
            var height = $(window).height();
            var ff_height = $("#ff").height();
            var table_height = height - ff_height - 60;
            $("#datagrid").css("max-height", table_height);
            $("#datagrid").datagrid({
                rownumbers: true,
                // pagination: true,
                singleSelect: true,     //是否单选
                idField: "id",
                checkOnSelect: false,
                fitColumns:true,    //自动适应分辨率
                scrollbarSize:0 ,    //滚动条大小
                onLoadSuccess:function (data) {
                    var tableTd = $('div.datagrid-body td[field="categoryName"]'); //productname是列名
                    tableTd.each(function () {
                        var $this = $(this);
                        var index = $this.parent('tr').attr('datagrid-row-index');
                        var rows = $('#datagrid').datagrid('getRows');
                        var currentRow = rows[index];
                        var content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.categoryName + '</div>'; //productname是列名
                        $this.tips({ content: content, wrapColor: 'black' });
                    });
                }
            }).datagrid("getPager").pagination({
                onSelectPage: searchBy

            });
            aRecords("渠道核查","/webapp/pages/product/audit/categorymiss")
        });

        function searchBy(){
            var data = getFormData(document.getElementById("ff"));
            data.reportType=window.parent.workMode.toUpperCase();
            data.recordCount = $("#recordCountQuery").switchbutton("options").checked;
            data.count = $("#countQuery").switchbutton("options").checked;
            data.total = $("#totalQuery").switchbutton("options").checked;
            data.caMissing = $("#categorQuery").switchbutton("options").checked;
            data.categoryCodes = $("#categorySelect").combotree("getValues").toString();
            $.ajax({
                url:config.url + "/categoryMiss/getAll",
                type:"get",
                data:transfer(data),
                dataType: "json",
                xhrFields:{withCredentials:true},
                beforeSend:function () {
                    $.messager.progress({
                        title:"请稍等",
                        interval:50,
                        text:"数据加载中..."
                    });
                },
                success:function(data){
                    $.messager.progress("close");
                    if (data.code == 200) {
                        $("#datagrid").datagrid("loadData", data.msg.content);
                    }else {
                        $.messager.alert("提示", data.msg, "error");
                    }
                },
                error:function(data){
                    $.messager.progress("close");
                }
            });
        }

        function zeroReplace(val,row) {
            if (val == 0) {
                return "";
            }else {
                return val;
            }
        }

        function initCategoryMultiple() {
            var dtd = $.Deferred();
            $.ajax({
                url:config.url +"/category/getAll",
                type:"get",
                xhrFields:{withCredentials:true},
                success:function (data) {
                    if(data){
                        var content=[];
                        for (let i = 0; i < data.length; i++) {
                            content[i] = {"id": data[i].code, "text": data[i].name};
                        }
                        $("#categorySelect").combotree({
                            valueField: "id",
                            textField: "text",
                            panelHeight:150,
                            prompt: "--请选择--",
                            multiple: true,
                            data:content,
                        });
                    }
                    dtd.resolve();
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    dtd.resolve();
                }
            })
            return dtd.promise();
        }
    </script>
</html>